<template>
	<div>
		<mj-title type="h2" title="Color 色彩"></mj-title>
		<div class="page-desc">UI提供一套配色系统来定义整体风格，以保证页面整体视觉效果。</div>

		<mj-title type="h5" title="主色"></mj-title>
		<div class="mb50">
			<div class="color-card" style="background:var(--primary)">
				<h6>Primary Color</h6>
				<p>#2d8cf0</p>
			</div>
		</div>

		<mj-title type="h5" title="辅助色"></mj-title>
		<div class="page-desc">辅助色是具有代表性的颜色，常用于信息提示，比如成功、警告和失败。</div>
		<div class="mb50">
			<div class="color-card" style="background: var(--success)">
				<h6>Success</h6>
				<p>#19be6b</p>
			</div>
			<div class="color-card" style="background: var(--warning)">
				<h6>Warning</h6>
				<p>#ff9900</p>
			</div>
			<div class="color-card" style="background: var(--error)">
				<h6>Error</h6>
				<p>#ed4014</p>
			</div>
			<div class="color-card" style="background: var(--info)">
				<h6>Info</h6>
				<p>#2db7f5</p>
			</div>
		</div>

		<mj-title type="h5" title="中性色"></mj-title>
		<div class="page-desc">中性色常用于文本、背景、边框、阴影等，可以体现出页面的层次结构。</div>
		<div class="mb50">
			<div class="color-card" style="background: var(--gray5)">
				<h6>主要文字</h6>
				<p>#515a6e</p>
			</div>
			<div class="color-card" style="background: var(--gray6)">
				<h6>常规文字</h6>
				<p>#666666</p>
			</div>
			<div class="color-card" style="background: var(--gray9)">
				<h6>描述类</h6>
				<p>#999999</p>
			</div>
			<div class="color-card" style="background: var(--disabled)">
				<h6>Disabled</h6>
				<p>#d7d7d7</p>
			</div>
			<div class="color-card" style="background: var(--gray16);color:var(--black)">
				<h6>背景色</h6>
				<p>#f5f5f5</p>
			</div>
		</div>

		<mj-title type="h5" title="所有配色表"></mj-title>
		<div class="page-desc">内置了多种配色，自定义颜色时候可以用变量直接使用，如：<code>var(--primary)</code>。在定制皮肤时候，只需包含一个如下变量的css文件。</div>
		<div class="mb50">
			<ul class="color-list">
				<li style="background:var(--primary)">primary</li>
				<li style="background:var(--primaryhover)">primaryhover</li>
				<li style="background:var(--link)">link</li>
				<li style="background:var(--focus)">focus</li>
				<li style="background:var(--blue)">blue</li>
				<li style="background:var(--bluehover)">bluehover</li>
				<li style="background:var(--cyan)">cyan</li>
				<li style="background:var(--red)">red</li>
				<li style="background:var(--redhover)">redhover</li>
				<li style="background:var(--green)">green</li>
				<li style="background:var(--greenhover)">greenhover</li>
				<li style="background:var(--royalblue)">royalblue</li>
				<li style="background:var(--royalbluehover)">royalbluehover</li>
				<li style="background:var(--orange)">orange</li>
				<li style="background:var(--orangehover)">orangehover</li>
				<li style="background:var(--gray3)">gray3</li>
				<li style="background:var(--gray4)">gray4</li>
				<li style="background:var(--gray5)">gray5</li>
				<li style="background:var(--gray6)">gray6</li>
				<li style="background:var(--gray7)">gray7</li>
				<li style="background:var(--gray8)">gray8</li>
				<li style="background:var(--gray9)">gray9</li>
				<li style="background:var(--gray10)">gray10</li>
				<li style="background:var(--gray11)">gray11</li>
				<li style="background:var(--gray12)">gray12</li>
				<li style="background:var(--gray13)">gray13</li>
				<li style="background:var(--gray14)">gray14</li>
				<li style="background:var(--gray15)">gray15</li>
				<li style="background:var(--gray16);color:#333">gray16</li>
				<li style="background:var(--gray17);color:#333">gray17</li>
				<li style="background:var(--black)">black</li>
				<li style="background:var(--white);color:#333">white</li>
				<li style="background:var(--disabled)">disabled</li>
				<li style="background:var(--line)">line</li>
				<li style="background:var(--border-color)">border-color</li>
				<li style="background:var(--success)">success</li>
				<li style="background:var(--warning)">warning</li>
				<li style="background:var(--error)">error</li>
				<li style="background:var(--normal)">normal</li>
				<li style="background:var(--info)">info</li>
				<li style="background:var(--pink)">pink</li>
				<li style="background:var(--yellow)">yellow</li>
				<li style="background:var(--table-border-color)">table-border-color</li>
				<li style="background:var(--table-tr-hover)">table-tr-hover</li>
				<li style="background:var(--placeholder)">placeholder</li>
			</ul>
		</div>
	</div>
</template>

<style scoped>
.color-card {display: inline-block;width:260px;border-radius: 5px;padding:15px;color:var(--white);line-height:2;margin:5px;}
.color-card h6 {font-size: 16px;font-weight: normal;}
.color-card p {color:var(--darkgray);}
.color-list {font-size: 0;}
.color-list li {display: inline-block;width:100px;height:30px;border-radius:3px;margin:3px;text-align:center;line-height: 30px;color:#fff;font-size: 12px;}
</style>